<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="15">
    <title>DOM相关操作</title>
    <style>
        .box {
            width: 40vw;
            margin: 0 auto;
            background: rgb(42, 136, 194);
        }

        .son {
            width: 5vw;
            height: 5vh;
            margin: 0 auto;
            text-align: center;
            line-height: 5vh;
            color: purple;
            background-color: orange;
            border: 1px solid black;
            border-top: none;
        }

        .box .son:nth-child(1) {
            border-top: 1px solid black;
        }
    </style>

</head>

<body>


    <!-- 
        DOM相关操作：
            1.查询元素：

                单个元素获取：
                document.querySelector('.box') 获取第一个匹配到的元素
                document.getElementById('id') 通过元素ID获取单个元素

                多个元素获取：
                document.querySelectorAll('div') 获取所有匹配到的元素 返回一个类数组
                document.getElemenstByClassName('box') 通过类名获取元素 返回一个类数组
                document.getElementsByTagName('div') 通过标签名获取元素 返回一个类数组
                document.getElementsByName('viewport') 通过标签 name 属性获取元素 返回一个类数组

                {
                    元素都具备 get 系列的方法 继承而来 

                    再不使用query系列的时候，想要精确定位元素 需要分两步：

                    <ul class="list1">
                        <li>*3
                    </ul>

                    <ul class="list2">
                        <li>*3
                    </ul>

                    需要获取 list2 下面所有的 li 标签

                    es6:
                    doc.qSA('.list2 li')

                    es5:
                    doc.gBCN('list2')[0].gBTN('li')

                    假如页面结构更加复杂，显然 ES6 的方法更节省成本；
                }

                对比 HTMLCollection(get 系列返回的类数组) 和 NodeList(query返回的类数组)

                前者是动态获取元素，后者是静态获取

                建议尽量使用后者方法，因为前面的方法，会受到元素变化的影响(反馈现象)
                不利于对元素进行管控，也不安全；

            2.添加元素：
                之前一直使用 innerHTML 或者 innerText 但是这两个方法缺点很多，不够灵活
                
                关于DOM操作 多使用下面这些方法：

                doc.createElement('div') 创建一个元素节点 存储在内存中
                doc.appendChild(doc.cE('div')) 把创建的节点渲染到页面

                不建议使用 doc.innerHTML 因为这个方法会导致页面重新渲染 
                并且覆盖 doc 元素上面已经存在的 节点 大大消耗浏览器的性能

                推荐使用：
                const liAera = doc.createDocumentFragment() // 创建一个集装箱 先保存要渲染的元素

                for (let i = 0; i < 10000; i++) 
                { 
                    在集装箱里先保存一万个元素
                    liAera.appendChild(document.createElement('li'))  
                }

                doc.qs('ul').appendChild(liAera) 一次性渲染到页面中 比 innerHTML快得多 功耗低；
                是一种逻辑优秀的写法；

            3.删除元素：
                两种方法：
                (1).大义灭亲法：removeChild 只能删一个
                    以父之名删除逆子：

                    <ul>
                        <li></li>
                        <li></li>
                    </ul>

                    doc.qs('ul').removeChild(doc.qs('li'))

                    或者 doc.qs('li').parentNode.removeChild(doc.qs('li'))
                (2).自我毁灭法：remove
                    学哪吒削骨还父，削肉还母

                    doc.qs('li').remove

                删除所有子元素：
                    const li = doc.qsA('li')
                    li.forEach( li => li.remove())

            顺便记录页面自动刷新的几个方法：
            
            HTML 方法：

            <head>
                <meta http-equiv="refresh" content="10"> 每十秒刷新一次
            </head>

            JS方法：
                1，history.go(0) √
                2，location.reload() √
                3，location=location
                4，location.assign(location)
                5，document.execCommand('Refresh') √
                6，window.navigate(location)
                7，location.replace(location)
                8，document.URL=location.href
    -->

    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
    </div>


    <script>
        // 查询元素
        const box = document.querySelector('.box')
        const son1 = document.querySelector('.son')

        // 时间常数
        const T = 1000

        // 删除第一个节点

        setTimeout(() => {
            box.removeChild(son1) // 剩下四个 以父之名删除
        }, T * 2)

        const son2 = son1.nextElementSibling // son1 的 下一个兄弟元素

        setTimeout(() => {
            son2.remove() // 自爆 剩下三个
        }, T * 4)

        const son3 = son2.nextElementSibling // 下一个兄弟元素

        setTimeout(() => {
            son3.parentNode.removeChild(son3) // 以父之名再删除一个 剩下两个 4 5
        }, T * 6)


        // 再添加十个新的 div

        const divAera = document.createDocumentFragment() // 创建一个缓存区

        for (let i = 0; i < 10; i++) {
            const div = document.createElement('div')
            div.className = 'son'
            div.innerText = i + 6
            divAera.appendChild(div) // 先保存到缓存区
        }

        setTimeout(() => {
            box.appendChild(divAera) // 此时又出现了十个div 总共十二个 div 4-15
        }, T * 8)

        // 删除 6-14 的所有 div

        setTimeout(() => {

            // 转化为数组 就可以调用数组的方法裁剪了
            const divList = [...document.querySelectorAll('.son')]

            // 裁切出目标
            const removingDiv = divList.slice(2, 11)

            removingDiv.forEach(div => div.remove())

        }, T * 12)
    </script>

</body>

</html>